<!--
 * @Author: C.
 * @Date: 2023-03-17 10:37:01
-->
<template>
  <Tooltip v-if="attrs.text">
    <template #title>
      <span>{{ attrs.text || attrs.text }}</span>
    </template>
    <span class="table-link">
      <span class="copy-icon" @click.stop="copyBill" v-show="!loading">
        <Icon icon="ant-design:copy-outlined" color="#888" size="20" />
      </span>
      <span class="copy-icon-check" v-show="loading">
        <Icon icon="ant-design:check-outlined" color="green" size="20" />
      </span>
      <a @click.stop="linkTo">{{ attrs.display || attrs.text }} </a>
    </span>
  </Tooltip>
  <span v-else>{{ projectSettings.dataPlaceholder }}</span>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router';
  import { unref, useAttrs } from 'vue';
  import { Tooltip } from 'ant-design-vue';

  import Icon from '/@/components/Icon';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { projectSettings } from '/~/settings/projectSettings';
  import { usePeriod } from '/~/hooks/component/usePeriod';
  const router = useRouter();
  const attrs = useAttrs();
  const { clipboardRef } = useCopyToClipboard();
  const { createMessage } = useMessage();
  const { loading, start } = usePeriod(2000);
  // CopyOutlined
  function linkTo() {
    console.log('跳转参数', { ...attrs });

    router.push(unref(attrs));
  }
  function copyBill() {
    start();
    clipboardRef.value = unref(attrs.text as string);
    createMessage.success(`[${attrs.text}]复制成功`);
  }
</script>
<style lang="less" scoped>
  .table-link {
    padding-left: 20px;
    position: relative;

    .copy-icon {
      display: none;
      position: absolute;
      left: 0;
      cursor: pointer;
    }

    .copy-icon-check {
      position: absolute;
      left: 0;
      cursor: pointer;
    }

    &:hover {
      .copy-icon {
        display: block;
      }
    }
  }
</style>
